<template>
  <section>
    <div class="filter-container">
        <el-select @change="handleFilter" size="mini" v-model="currentId" clearable placeholder="选品库" clearble>
            <el-option
                    v-for="item in groupList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
            </el-option>
        </el-select>
        <common-input @keyup.enter.native="handleFilter" class="w200 ml10" placeholder="商品关键字" v-model="listQuery.keyword" />
        <el-button size="mini" class="ml10" type="primary" icon="el-icon-search" @click="handleFilter">搜索</el-button>
        <el-button size="mini" class="ml10" @click="handleGroupSync" type="primary">同步选品库</el-button>
        <el-button v-if="currentId>0" size="mini" class="ml10" @click="handleGoods" type="primary">同步选品库商品</el-button>
    </div>
    <el-table
                :data="list"
                style="width: 100%">
            <el-table-column align="left" label="" width="140">
                <template slot-scope="scope">
                    <span><img :src="scope.row.imgUrl" style="width:80px;" /></span>
                </template>
            </el-table-column>
            <el-table-column align="left" label="商品">
                <template slot-scope="scope">
                    <span>{{scope.row.name}}</span>
                </template>
            </el-table-column>
            <el-table-column align="left" label="商品状态" >
                <template slot-scope="scope">
                    <span>{{scope.row.invalid == 1 ? '失效' : '有效'}}</span>
                </template>
            </el-table-column>
            <el-table-column align="left" label="价格" >
                <template slot-scope="scope">
                    <span>￥{{scope.row.price}}</span>
                </template>
            </el-table-column>
            <el-table-column align="left" label="渠道专属价" >
                <template slot-scope="scope">
                    <span>￥{{scope.row.channelPrice}}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="操作" >
                <template slot-scope="scope">
                    <span>
                        <el-button v-if="!scope.row.productId" size="mini" type="primary" @click="handleCheck(scope.row)">选品入库</el-button>
                        <el-button v-else size="mini" type="white" @click="handleDetail(scope.row)">查看商品</el-button>
                    </span>
                </template>
            </el-table-column>
    </el-table>
        <div v-show="!listLoading" class="pagination-container">
            <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="listQuery.page" :page-sizes="[20,30, 50]" :page-size="listQuery.num" layout="total, sizes, prev, pager, next, jumper" :total="total"> </el-pagination>
        </div>
  </section>
</template>

<script>
    import {
        alibaba_group_sync,
        alibaba_goods_list,
        alibaba_goods_sync,
        alibaba_group,
        alibaba_goods_detail_sync
    } from '../../api/alibaba';
    export default {
        components: {
        },
        data() {
            return {
                list: null,
                listLoading: true,
                listQuery: {
                    page: 1,
                    num: 20,
                    keyword: undefined,
                },
                total: null,
                activeName: '2',
                currentId: 0,
                groupList: []
            }
        },
        mounted() {
        },
        created() {
            this.currentId = parseInt(this.$route.query.id);
            if(!this.currentId) {
                this.currentId = undefined;
            }
            this.getList();
            this.getGroupList();
        },
        methods: {
            handleGroupSync() {
                this.$confirm('确定同步选品库?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                })
                    .then(() => {
                        alibaba_group_sync()
                            .then(() => {
                                this.$message.success("选品库已同步");
                                this.getGroupList();
                            });
                    }).catch(()=>{});
            },
            getGroupList() {
                alibaba_group().then(response => {
                    this.groupList = response.data;
                })
            },
            handleGoods() {
                this.$confirm('确定同步商品?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                })
                    .then(() => {
                        alibaba_goods_sync(this.currentId)
                            .then(() => {
                                this.$message.success("商品已同步");
                                this.handleFilter();
                            });
                    }).catch(()=>{});
            },
            getList() {
                this.listLoading = true;
                alibaba_goods_list(this.currentId, this.listQuery).then(response => {
                    this.list = response.data.list;
                    this.total = response.data.total;
                    this.listLoading = false;
                })
            },
            handleFilter() {
                this.listQuery.page = 1;
                this.getList();
            },
            handleSizeChange(val) {
                this.listQuery.num = val;
                this.getList();
            },
            handleCurrentChange(val) {
                this.listQuery.page = val;
                this.getList();
            },
            handleClick(tab, event) {
                this.listQuery.auditStatus = this.activeName;
                this.handleFilter();
            // console.log(this.activeName)
            },
            leaveTab(activeName, oldActiveName) {
            // console.log(activeName)
            // return false;
            },
            handleUpdate(row) {
                this.$router.push("/goods_edit?id=" + row.id + "&from=" + encodeURIComponent(this.$router.currentRoute.name)) 
            },
            handleSubmit(row) {
                this.$confirm('此操作将提交商品审核, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                })
                    .then(() => {
                        product_submit(row.id)
                            .then(() => {
                                this.$message.success("商品已提交审核");
                                this.getList();
                            });
                    }).catch(()=>{});
                
            },
            handleDelete(row) {
                this.$confirm('此操作将永久删除, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                })
                    .then(() => {
                        product_delete(row.id)
                            .then(() => {
                                this.$message.success("商品删除成功");
                                this.getList();
                            });
                    }).catch(()=>{});
            },
            handleCheck(row) {
                alibaba_goods_detail_sync(row.id).then((res)=>{
                    this.$router.push("/alibaba_goods_add?id=" + row.id) 
                }).catch((err)=>{

                })
            },
            handleDetail(row) {
                let {href} = this.$router.resolve({path: '/goods_detail?id=' + row.productId});
                window.open(href, '_blank');
            }
        }
    };
</script>
<style lang="scss" scoped>
</style>
